css

| 分类于

@TOC
层叠样式表，控制HTML的布局和样式

使用方式

三种使用方式

  • 内联样式：在标签内使用属性stype
  • 页内样式：在 <head> 标签中使用 <style type="text/css"></style>
  • 外部样式：使用CSS文件，使用 <link rel="stylesheet" type="text/css" href="mystyle.css">

优先级从高到低

基本语法

selector {property1: value1, ..., propertyN:valueN}

  • 例如 a {color:red; text-decoration:line-through} ，将链接标签文字颜色变成红色且有横线穿过

    颜色写法

    1
    2
    3
    p { color: #ff0000; } /*大小写无所谓*/
    p { color: #f00; } /*FF0000的缩写*/
    p { color: rgb(255,0,0); } /*三原色表示，0~255*/

  • 颜色，写16进制，可以压缩

选择器

标签选择器

body {text-align: center}

  • 上例直接使用HTML标签的选择器，就是标签选择器，元素选择器
  • 注意，如果将标签改为*，表示统配所有HTML标签

    id选择器

    id指的是HTML标签内的属性id，例如 <div id="menu">
    # 代表 id
    1
    2
    3
    4
    5
    6
    #menu {
    	background-color: rgb(255, 255, 255);
    	width: 100%;
    	border-bottom: #f0f0f0 solid 1px;
    	margin: 0px 0px 5px 0px;
    }

background-color 背景色
border-bottom 向下的边界线
在这里插入图片描述
margin 外边框 上 右 下 左
在这里插入图片描述

类选择器

类，指的是标签中的class属性，例如 <div class='main center'>

1
2
3
4
.center {
	width: 80%; 
	margin: auto;
}

在这里插入图片描述
居中 margin:auto
在这里插入图片描述

选择器分组

分组的选择就可以使用同样的样式声明
同一个样式的时候可以使用
可以是标签,可以是ID 也可以是class

1
2
3
h1,h2,h3,h4,h5,h6 { 
	color: green;
}

层次选择器

1、后代选择器

1
2
3
div li {
	display: inline;
}

  • 所有div标签下任意层下的li标签
    1
    2
    3
    div#menu li {
    	display: inline;
    }

2、子选择器

1
2
3
ul > li {
	display: inline;
}

  • 所有div标签下直接的子元素li标签
    1
    2
    3
    div#menu ul > li { 
    	display: inline;
    }

3、相邻兄弟选择器

兄弟标签改变属性，自己本身不改变

1
2
3
div.detail p + p {
	color: green;
}

4、显示消失

1
2
3
div#menu ul > li { 
	display: none;
}

class为detail的div标签下任意层下的近邻p标签的下一个p标签

伪类 pseudo-classes

  • 伪类能增加样式，类似于class

  • 锚伪类，链接标签a的四种状态

    1
    2
    3
    4
    a:link {color: red} /* 未访问的链接 */
    a:visited {color: green} /* 已访问的链接 */
    a:hover {color: blue} /* 鼠标移动到链接上 */
    a:active {color: black} /* 选定的链接 */

  • 伪类可以和css类配合使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    a.red:visited {color: #FF0000}
    a:hover {
    	color: red;
    }
    a {
    	color: chartreuse;
    	text-decoration-line: none;
    }

    <a class="red" href="css_syntax.asp">CSS Syntax</a>

注意，伪类和前面部分中间不要有空格

伪元素pseudo-element

伪元素能增加元素

:before 和 :after 可以在元素前后插入内容

1
2
3
4
5
6
#homepage:after 
	content:url(http://www.baidu.com/kczx/images/why1.png);
}
a:before {
		content:"这是链接~~~";
}

属性选择器
E [ attr ] { sRules } 具有某属性
E [ attr = value ] { sRules } 具有某属性且等于value
E [ attr ~= value ] { sRules } 具有某属性且属性值中的一个是value
`E [ attr = value ] { sRules }` 具有某属性且属性值使用了-，且-之前的部分是value的才匹配
`*[class		 =”main”]能和
` 减号之前的部分匹配
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
链接具有href属性
a[href] { 
	color: blue;  
	text-decoration:line-through
}

图片alt属性为magedu_logo
img[alt=magedu_logo] { 
	height: 20px;
}

*[class="main center"] { 
	color:black
}

*[class~="center"] { 
	color:black
}

继承

1
2
3
4
body { 
	text-align: center; 
	color:red;
}

观察整个页面文字颜色，几乎都变成了红色。
页面中父元素中使用的样式，通过CSS继承，子孙元素将继承并使用祖先元素的属性，除非子元素重新定义了该属性

常见样式

背景 background复合属性 http://www.w3school.com.cn/css/css_background.asp
字体 font复合属性 http://www.w3school.com.cn/css/css_font.asp

  • 表格border

    1
    2
    3
    4
    5
    6
    7
    8
    9
    table
    { 
    	border-collapse:collapse;
    }

    table,td
    { 
    	border: 1px solid black;
    }

  • margin外边距和padding内边距

    1
    2
    3
    4
    5
    6
    7
    8
    margin: top right bottom left
    padding: top right bottom left

    padding:10px 5px 15px 20px; /*顺时针上右下左*/
    padding:10px 5px 15px; /*上10px、左右5px、下15px*/
    padding:10px 5px; /*上下10px、左右5px*/
    padding:10px /*4方向全是10px*/
    margin:auto /*浏览器计算外边距*/

内外边距都是顺时针设置4个方向，也可以单独设置

  • 测试用HTML
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    <html>

    <head>
        <title>test page</title>
        <meta charset="utf-8">
        <style type="text/css">
        </style>
    </head>

    <body>
        <div class='main center'>
            <div id="menu">
                <ul>
                    <li><a id="homepage">主页</a></li>
                    <li><a>Linux</a></li>
                    <li><a>Python</a></li>
                </ul>
            </div>
            <a href="https://github.com/" target="_blank" title="abc">请点击</a><span>inline
                span</span>
            <p>
                <span>biggest title</span>
                <img src="https://github.githubassets.com/images/modules/site/integrators/google.png" alt="github_logo">
            </p>
            <div id='detail' name='detail' class="detail">
                <p>title</p>
                <p>content</p>
            </div>
            <div>
                <form action="" method="POST">
                    <table>
                        <tr>
                            <td>用户名<input name='h' type="hidden" value="001111256"></td>
                            <td><input name='username' type="text" value="abc"></td>
                        </tr>
                        <tr>
                            <td>密码</td>
                            <td><input name='pwd' type="password"></td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td><input name=gender type="radio" checked value="M">男<input name=gender type="radio"
                                    value="F">女</td>
                        </tr>
                        <tr>
                            <td>爱好</td>
                            <td>
                                <input name="interest" type="checkbox" checked value="music">音乐
                                <input name="interest" type="checkbox" checked value="movie">电影
                            </td>
                        </tr>
                        <tr>
                            <td>其他</td>
                            <td>
                                <textarea>
            line1
            line2
            </textarea>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input name=submit type="submit" value="提交">
                                <input type="reset" value="重置">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </body>

    </html>
感谢支持 ！
0%